<template>
    <aside>
        <div class="logo">
            <span>
               <em :title="login.name">{{login.name}}</em>
            </span>
        </div>
        <ul>
            <template v-for="item in nav">
                    <router-link
                            tag="li"
                            :to="item.url"
                            v-if="list === item.text"
                            v-for="list in asideShow"
                            active-class="active"
                            :key="item.id"
                            @click.native="evt">
                        <i :style="{backgroundImage:presentRouter === item.url?item.img2:item.img1}"></i>
                        <span>{{item.text}}</span>
                        <b></b>
                        <div class="num" v-show="item.number">{{number}}</div>
                    </router-link>

            </template>
        </ul>
        <i></i>
    </aside>
</template>

<script>
    export default {
        name: "asideNav",
        props:['asideShow','login','number'],
        data (){
            return {
                isShow:false,
                // num:null,//获取当前页面参数，转为数字用于显示aside背景
                nav:[
                    {'img1':'url(../../static/images/zhgl_1.svg)','img2':'url(../../static/images/zhgl_2.svg)','text':'账号管理','url':'/table'},
                    {'img1':'url(../../static/images/khgl_1.svg)','img2':'url(../../static/images/khgl_2.svg)','text':'客户管理','url':'/client'},
                    {'img1':'url(../../static/images/gsgl_1.svg)','img2':'url(../../static/images/gsgl_2.svg)','text':'公司管理','url':'/company'},
                    {'img1':'url(../../static/images/lpgl_1.svg)','img2':'url(../../static/images/lpgl_2.svg)','text':'楼盘管理','url':'/houses'},
                    {'img1':'url(../../static/images/cwgl_1.svg)','img2':'url(../../static/images/cwgl_2.svg)','text':'财务管理','url':'/finance'},
                    {'img1':'url(../../static/images/b.svg)','img2':'url(../../static/images/a.svg)','text':'我的财务','url':'/finance1'},
                    {'img1':'url(../../static/images/c.svg)','img2':'url(../../static/images/d.svg)','text':'事业部总列表','url':'/hall'},
                    {'img1':'url(../../static/images/announcement3.svg)','img2':'url(../../static/images/announcement4.svg)','text':'公告管理','url':'/announcementManagement'},
                    {'img1':'url(../../static/images/announcement1.svg)','img2':'url(../../static/images/announcement2.svg)','text':'我的公告','url':'/myAnnouncement','number':true},
                ],
                presentRouter:''//获取当前路由
            }
        },
        created(){
          this.presentRouter = this.$route.path;
        },
        computed:{
        },
        methods:{
            evt(){
              this.presentRouter = this.$route.path;
            }
        },
        watch:{
            asideShow:{
                handler(x,y){
                    // // console.log(x,y)
                    // // console.log(this.asideShow)
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../static/css/style.less";
    aside{
        width: 180px;
        height: 100%;
        background: @cf;
        .pf;
        left: 0;
        top: 0;
        z-index: 9999;
        .bs(0 0 10px #ccc);
        .logo{
            width: 70%;
            height: 60px;
            margin:40px auto 0;
            .bud("../../static/images/logo.svg",center center,100% 100%);
            .pr;
            span{
                .pa;
                right: 0;
                bottom: -10px;
                color: @c6;
                max-width: 112px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                em{
                    letter-spacing: 2px;
                    margin-left: 2px;
                }
            }
        }
        ul{
            margin-top: 50px;
            li{
                width: 100%;
                height: 40px;
                line-height: 40px;
                cursor: pointer;
                padding:0 12px;
                .pr;
                i{
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    margin-right: 20px;
                    .pr;
                    top: 3px;
                }
            }
            .active{
                width: 190px;
                .blg(to right,#cd1f5c,#e11e27);
                color: @cf;
                .pr;
                b{
                    width: 0;
                    height: 0;
                    border:7px solid transparent;
                    border-top: 7px solid #cd1f5c;
                    display: inline-block;
                    .pa;
                    top: -7px;
                    right: 3px;
                    .tm(rotate(45deg))
                }
                .num{
                    background-color: @cf;
                    color: #E51C23;
                }
            };
        }
        >i{
            width: 100%;
            height: 33%;
            display: inline-block;
            .bud("../../static/images/aside_bg.svg",center center,cover);
            .pa;
            left: 0;
            bottom: 0;
        }
        .num{
            .pa;
            .db;
            width: 25px;
            height: 15px;
            top: 0;
            right: 23px;
            bottom: 0;
            margin: auto;
            background-color: #B52134;
            color: @cf;
            font-size: 12px;
            border-radius: 10px;
            line-height: 15px;
            .tac;
        }
    }
</style>
